<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
</head>

<body>
    <!-- 
    v-bind这个指令可以让html标签的某个属性产生动态的效果
    原则上v-bind指令后面的这个参数名可以随便写,但大部分情况下这个参数名还是需要写成html标签支持的属性名，这样才有意义

    v-bind因为很常用，Vue提供了简写形式，
    v-bind:title="msg"可以简写为：title="msg"
    -->
    <div class="app">
        <span v-bind:xyz="msg"></span>
        <!-- 这个表达式带有单引号，这个msg就不是变量了，是常量 -->
        <span v-bind:title="'msg'"></span>
        <!-- <img  src="imgs/lyf.jpg" alt="" srcset=""> -->
        <img v-bind:src="img">
        <img :src="img1">
        <input type="text" :value="hhh">


        <!--不能采用以下写法
    vue.js:5129 [Vue warn]: Error compiling template:
href="{{url}}": Interpolation inside attributes has been removed.
 Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.
    请使用v-bind或冒号代替

        <a href="{{url}}"></a>
    -->

    <!-- 
    什么时候使用差值语法？什么时候使用指令语法？ 
    凡是标签体当中的内容要想要动态，需要使用插值语法
    只要向html标签的属性动态，需要使用指令语法
    -->
    </div>

</body>
<script>
    new Vue({
        el: ".app",
        data: {
            msg: "hello",
            img: "imgs/lyf.jpg",
            img1: "imgs/lyf.jpg",
            hhh: "lisi",
            url: "https://www.baidu.com"
        }

    })
</script>

</html>